<template>
    <el-row>
        <!-- 头部 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <el-breadcrumb :separator-icon="ArrowRightBold">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>设置中心</el-breadcrumb-item>
                    <el-breadcrumb-item>钱包横幅设置</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
        </el-col>
        <div style="padding: 5px;"></div>
        <!-- 内容区域 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <div style="margin-bottom: 20px;">
                    <el-alert title="首页轮播图设置" type="success" :closable="false"></el-alert>
                </div>

                <!-- 表格 -->
                <el-form label-width="180px" label-position="right" style="width: 50%;">
                    <el-form-item label="钱包横幅">
                        <el-input type="text" disabled placeholder="图片尺寸要求：670*275px">
                            <template #append>
                                <el-button @click="ImageUpload()">选择图片</el-button>
                            </template>
                        </el-input>

                      <div style="display: flex; flex-direction: column; position: relative;">
                        <div v-if="formData.qb_banner"
                             style="width: 200px; height: 82px; border: solid 1px #e6e6e6; margin-top: 5px;">
                          <img style="width: 200px; height: 82px;" :src="imageUrl" />
                        </div>

                        <div v-if="formData.qb_banner"
                             style="width: 20px; height: 20px; position: absolute; top: 5px; right: -20px;"
                             @click="formData.qb_banner = ''">
                          <svg t="1678712155966" class="icon" viewBox="0 0 1024 1024" version="1.1"
                               xmlns="http://www.w3.org/2000/svg" p-id="4668" width="20" height="20">
                            <path
                                d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128.287273c-211.584464 0-383.712727 172.128262-383.712727 383.712727 0 211.551781 172.128262 383.712727 383.712727 383.712727 211.551781 0 383.712727-172.159226 383.712727-383.712727C895.712727 300.415536 723.551781 128.287273 512 128.287273z"
                                fill="#d81e06" p-id="4669"></path>
                            <path
                                d="M557.05545 513.376159l138.367639-136.864185c12.576374-12.416396 12.672705-32.671738 0.25631-45.248112s-32.704421-12.672705-45.248112-0.25631l-138.560301 137.024163-136.447897-136.864185c-12.512727-12.512727-32.735385-12.576374-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.248112l136.255235 136.671523-137.376804 135.904314c-12.576374 12.447359-12.672705 32.671738-0.25631 45.248112 6.271845 6.335493 14.496116 9.504099 22.751351 9.504099 8.12794 0 16.25588-3.103239 22.496761-9.247789l137.567746-136.064292 138.687596 139.136568c6.240882 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.05545 513.376159z"
                                fill="#d81e06" p-id="4670"></path>
                          </svg>
                        </div>
                      </div>


                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm">保存设置</el-button>
                    </el-form-item>
                </el-form>

                <!-- 分页 -->
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup>

import { ref, reactive, onMounted, inject, getCurrentInstance } from 'vue'
import { success, error } from '@/common/tool/message.js'
import { request_post } from '@/common/axios/request.js'
import { ArrowRightBold } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance();
const imgData = reactive({ list: [] })
const formData = reactive({

  qb_banner: '',


})

onMounted(() => {
    adminConfigIndex()
})


function submitForm() {
    adminConfigCreate()
}


function adminConfigIndex() {
    request_post('/admin_config_index').then(res => {

        if (res.data.code == 200) {

            imageUrl.value = res.data.data.qb_banner
            formData.qb_banner = res.data.data.qb_banner

        } else {
            return error(res.data.msg)
        }
    })
}

// 添加配置
function adminConfigCreate() {

    request_post('/admin_config_create', formData).then(res => {
        console.log(res)
        if (res.data.code == 200) {
            return success(res.data.msg)
        } else {
            return error(res.data.msg)
        }
    })
}


function deleteUrl(index) {
    imgData.list.splice(index, 1)
}

const imageModel = inject('showImageModel')
const imageUrl = ref(inject('imageUrl'))
// 图片上传
function ImageUpload() {
    imageModel()
    formData.qb_banner = imageUrl
}

</script>

<style></style>
